/**
 * 路由组件与一般组件的区别：
 *
 *    定义：什么是路由组件，给到 Route 组件的 component 属性去用的组件，我们叫做路由组件
 *
 *    1. 调用方式不一样，一般组件是手动调用，路由组件是传递给 Route 的 component 属性，等该Route匹配时，它内部帮我们调用
 *    2. 存放位置不同。
 *      一般组件：components
 *      路由组件：pages / views
 *    3. 【重要】接受到的 props 不同
 *      一般组件：调用时传递了什么 prop ，就收到什么 prop
 *      路由组件：会自动收到如下三个prop
 *          history
 *          location
 *          match
 *
 * 1. history
 *      1. 主要包含一些编程式导航的函数。
 *      2. go()         前进or后退
 *      3. goBack()     后退
 *      4. goFOrward()  前进
 *      5. push()       跳转路由
 *      6. replace()    跳转路由，重定向的方式
 *
 * 2. location
 *      1. 主要包含当前路由的一些信息
 *      2. pathname
 *      3. search       查询字符串部分
 *      4. state        与 search 类似也是一种路由跳转时传递参数的手段
 * 3. match
 *      1. params       动态路由参数
 */

import { Component } from "react";
import { Route, Link, NavLink, Switch, Redirect } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <NavLink to="/home" activeClassName="abcd">
              go Home
            </NavLink>{" "}
            <br />
            <NavLink to="/about" activeClassName="abcd">
              go About
            </NavLink>
          </div>
          <div className="right">
            <Home />

            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/about" component={About} />
              <Redirect from="/abcd" to="/home" />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
